Sass Tutorial

Sass ஐக் கற்றுக்கொள்ளுங்கள்

Sass ஐக் கற்றுக்கொள்ளுங்கள்

Sass என்பது ஒரு CSS pre-processor ஆகும்.

Sass CSS-இன் மறுபடியும் செய்வதைக் குறைக்கிறது, எனவே நேரத்தை சேமிக்கிறது.

🏁 உதவிக்குறிப்பு:

உங்கள் முன்னேற்றத்தைக் கண்காணிக்க உள்நுழையவும்.

ஒவ்வொரு அத்தியாயத்திலும் எடுத்துக்காட்டுகள்

எங்கள் "Show Sass" கருவி Sass-ஐக் கற்றுக்கொள்வதை எளிதாக்குகிறது, இது குறியீடு மற்றும் முடிவு இரண்டையும் காட்டுகிறது.

Sass எடுத்துக்காட்டு

Sass குறியீடு:

/* வலைத்தளத்திற்கான நிலையான மாறிகள் மற்றும் மதிப்புகளை வரையறுக்கவும் */
$bgcolor: lightblue;
$textcolor: darkblue;
$fontsize: 18px;

/* மாறிகளைப் பயன்படுத்தவும் */
body {
  background-color: $bgcolor;
  color: $textcolor;
  font-size: $fontsize;
}

CSS வெளியீடு:

body {
  background-color: lightblue;
  color: darkblue;
  font-size: 18px;
}

💡 Sass-இன் நன்மைகள்:

Sass மாறிகள், கூடுதலான முறைகள், கணித செயல்பாடுகள் மற்றும் பலவற்றை வழங்குகிறது, இது CSS-ஐ மேலும் சக்திவாய்ந்ததாகவும் பராமரிக்கக்கூடியதாகவும் ஆக்குகிறது.

Sass செயல்பாடு குறிப்புகள்

Jassif Team-இல் நீங்கள் தொடரியல் மற்றும் எடுத்துக்காட்டுகளுடன் அனைத்து Sass செயல்பாடுகளின் முழு குறிப்புகளையும் காணலாம்.

Sass String Functions

சரம் செயல்பாடுகள் - சரங்களை கையாள உதவுகிறது

  • quote()
  • unquote()
  • str-length()
  • str-slice()

Sass Numeric Functions

எண் செயல்பாடுகள் - எண் செயல்பாடுகளை செய்ய உதவுகிறது

  • percentage()
  • round()
  • ceil()
  • floor()

Sass List Functions

பட்டியல் செயல்பாடுகள் - பட்டியல்களை கையாள உதவுகிறது

  • length()
  • nth()
  • join()
  • append()

Sass Map Functions

மேப் செயல்பாடுகள் - மேப்புகளை கையாள உதவுகிறது

  • map-get()
  • map-merge()
  • map-keys()
  • map-values()

Sass Selector Functions

தேர்வாளர் செயல்பாடுகள் - தேர்வாளர்களை கையாள உதவுகிறது

  • selector-nest()
  • selector-append()
  • selector-extend()
  • selector-replace()

Sass Introspection Functions

உள்ளார்ந்த செயல்பாடுகள் - Sass-இன் உள் நிலையை சரிபார்க்க உதவுகிறது

  • feature-exists()
  • variable-exists()
  • global-variable-exists()
  • function-exists()

Sass Color Functions

நிற செயல்பாடுகள் - வண்ணங்களை கையாள உதவுகிறது

  • rgb()
  • rgba()
  • hsl()
  • hsla()
  • lighten()
  • darken()

பயிற்சி

பயிற்சி:

Sass-இல் சரியான மாறி வரையறையைத் தேர்ந்தெடுக்கவும்.

// முதன்மை நிறத்தை வரையறுக்கவும்
var primary-color = #3498db;
✗ தவறு! var என்பது CSS மாறிகளுக்குப் பயன்படுகிறது, Sass-க்கு அல்ல
$primary-color: #3498db;
✓ சரி! $ குறியீடு Sass மாறிகளை வரையறுக்கப் பயன்படுகிறது
const primaryColor = "#3498db";
✗ தவறு! const என்பது JavaScript-க்குப் பயன்படுகிறது, Sass-க்கு அல்ல
let primary_color = #3498db;
✗ தவறு! let என்பது JavaScript-க்குப் பயன்படுகிறது, Sass-க்கு அல்ல

Sass முக்கிய அம்சங்கள்

மாறிகள்

நிறங்கள், எழுத்துருக்கள், அளவுகள் போன்றவற்றை சேமிக்க மாறிகளைப் பயன்படுத்தவும்.

கூடுதலான முறைகள்

CSS விதிகளை கூடுதலாக உருவாக்கி மீண்டும் பயன்படுத்தவும்.

வம்சாவளிகள்

CSS தேர்வாளர்களைக் கூடுதலாக உருவாக்கி குறியீட்டை கட்டமைக்கவும்.

செயல்பாடுகள் மற்றும் செயல்பாடுகள்

நிறங்கள், சரங்கள், எண்கள் மற்றும் பட்டியல்களில் செயல்பாடுகளைச் செய்யவும்.

கட்டுப்பாட்டு விதிகள்

நிபந்தனைகள், சுழல்கள் மற்றும் ஒவ்வொரு விதிகளுடன் CSS ஐ உருவாக்கவும்.

பகுதிகள் மற்றும் தொகுதிகள்

உங்கள் CSS ஐ பல கோப்புகளாகப் பிரித்து, பராமரிப்பை எளிதாக்கவும்.